<template>
  <div class="pinfo">
    <el-card class="box-card">
        <div style="width: 100%;height: 30px;text-align:left;margin-bottom: 30px;border-bottom-style: dashed;border-bottom-width: 1px"><span style="text-align: left;font-weight: 700">个人信息</span></div>
        <!-- 个人信息 -->
        <div style="width: 100%;height: 130px">
            <div style="width: 80%;float: left;">
                <el-descriptions :column="3" border>
                    <el-descriptions-item label="姓名" label-align="center" align="center" label-class-name="my-label"
                        class-name="my-content"
                        width="200px"
                    >{{this.userInfo.name}}</el-descriptions-item>
                    <el-descriptions-item label="性别" label-align="center" align="center">{{this.userInfo.sex}}</el-descriptions-item>
                    <el-descriptions-item label="出生日期" label-align="center" align="center">{{this.birthday}}</el-descriptions-item>
                    <el-descriptions-item label="电话号码" label-align="center" align="center">{{this.userInfo.phone}}</el-descriptions-item>
                    <el-descriptions-item label="身份证号" label-align="center" align="center">{{this.userInfo.identity}}</el-descriptions-item>
                </el-descriptions>
            </div>
            <div style="width: 8%; height: 100px; float:left; margin-top: 0px; margin-left: 50px;border-width:2px;border-style:solid;border-color:#989898">
                <img style="width: 100%; height: 100%" src="../../assets/img/img.jpg" alt="">
            </div>
        </div>
        <div style="margin-top: 0px">
            <el-descriptions :column="4" border>
                <el-descriptions-item label="学号" label-align="center" align="center"
                    label-class-name="my-label"
                    class-name="my-content"
                    width="150px"
                >{{this.userInfo.userName}}</el-descriptions-item>
                <el-descriptions-item label="年级" label-align="center" align="center">2019</el-descriptions-item>
                <el-descriptions-item label="入学年份" label-align="center" align="center">2019.9</el-descriptions-item>
                <el-descriptions-item label="毕业年份" label-align="center" align="center">2023.6</el-descriptions-item>
                <el-descriptions-item label="政治面貌" label-align="center" align="center">{{this.userInfo.political}}</el-descriptions-item>
                <el-descriptions-item label="学院" label-align="center" align="center">{{this.userInfo.college}}</el-descriptions-item>
                <el-descriptions-item label="专业" label-align="center" align="center">{{this.userInfo.major}}</el-descriptions-item>
                <el-descriptions-item label="班级" label-align="center" align="center">{{this.userInfo.classes}}</el-descriptions-item>
                <el-descriptions-item label="困难申请状态" label-align="center" align="center">
                    <el-tag :type="this.hardship.type">{{this.hardship.text}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="学生类别" label-align="center" align="center">{{this.userInfo.category}}</el-descriptions-item>
                <el-descriptions-item label="家庭地址" label-align="center" align="center">{{this.userInfo.address}}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div style="height: 240px;width:100%">
            <img style="width: 30%;height:100%;margin-top: 10px;margin-left: 60%" src="../../assets/img/school.svg" alt="">
        </div>
    </el-card>
  </div>
</template>

<script>
import request from '../../utils/request'

export default {
	data() {
		return {
			userInfo: {},
			birthday: '',
			hardship: {
				type: '',
				text: '',
			},
			userName: {
				userName: '',
			}
		}
	},
	created() {
		this.getUserInfo();
	},
	methods: {
		getUserInfo() {
			request.get('/api/user/selectSelfInformation',
		    {
		        headers: {'jwtToken': this.$store.getters.getToken}
	        }).then(res => {
			    this.userInfo = res.data;
				this.getHardship();
			    this.birthday = res.data.identity.substring(6, 10) + '-' + res.data.identity.substring(10, 12) + '-' + res.data.identity.substring(12, 14);
		    })
		},
		getHardship() {
			this.userName.userName = this.userInfo.userName
			request.post('/api/lesspay/flag',this.userName).then(res => {
				if (res.data === 1) {
					this.hardship.type = 'success'
					this.hardship.text = '已通过'
				}
				if (res.data === 0) {
					this.hardship.type = 'warning'
					this.hardship.text = '未审核'
				}
				if (res.data === -1) {
					this.hardship.type = 'danger'
					this.hardship.text = '未通过'
				}
				if (res.data === 2) {
					this.hardship.type = ''
					this.hardship.text = '未申请'
				}
			})
		}
	},
}
</script>

<style lang="less" scoped>
.pinfo {
    width: 100%;
    height: 100%;
    margin: auto;
}

.el-descriptions__body table td.is-right, .el-descriptions__body table th.is-right{
    text-align: center !important;
}

tr {
    height: 100px;
}

.box-card {
    width: 100%;
    height: 100%;
}
</style>
